<mat-form-field class="omv-flex-1"
                [formGroup]="formGroup">
  <mat-label>{{ config.label | transloco }}</mat-label>
  <mat-select [formControlName]="config.name"
              [placeholder]="config.placeholder"
              [required]="config.validators?.required">
    <mat-option *ngFor="let option of config.store.data"
                [value]="option[config.valueField]">
      {{ option[config.textField] }}<ng-container *ngIf="option['validto']"> [{{ 'Valid to' | transloco }} {{ option['validto'] | localeDate:'datetime' }}]</ng-container>
    </mat-option>
  </mat-select>
  <mat-icon *ngIf="config.hasCreateButton"
            matSuffix
            matTooltip="{{ 'Create' | transloco }}"
            svgIcon="mdi:plus-circle-outline"
            (click)="onCreate()">
  </mat-icon>
  <mat-error *ngIf="formGroup.invalid">
    <span *ngIf="formGroup.hasError('required', config.name)">
      This field is required.
    </span>
  </mat-error>
  <mat-hint *ngIf="config.hint?.length > 0"
            [innerHTML]="config.hint | transloco | sanitizeHtml">
  </mat-hint>
</mat-form-field>
